<!DOCTYPE html>
<html>
<head>
<title>Physics Diagram</title>
</head>
<body>

<canvas id="physicsCanvas" width="450" height="450"></canvas>

<script>
const canvas = document.getElementById('physicsCanvas');
const ctx = canvas.getContext('2d');

// Style settings
ctx.strokeStyle = 'black';
ctx.fillStyle = 'black';
ctx.lineWidth = 2;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';

// --- Main drawing ---

// 1. Elevator Frame
const elevatorX = 50;
const elevatorY = 50;
const elevatorW = 350;
const elevatorH = 350;
ctx.strokeRect(elevatorX, elevatorY, elevatorW, elevatorH);

// 2. Acceleration Arrow 'a'
const arrowBaseX = elevatorX + elevatorW / 2;
const arrowBaseY = elevatorY;
const arrowTipY = 20;
ctx.beginPath();
ctx.moveTo(arrowBaseX, arrowBaseY);
ctx.lineTo(arrowBaseX, arrowTipY);
// Arrowhead
ctx.moveTo(arrowBaseX, arrowTipY);
ctx.lineTo(arrowBaseX - 5, arrowTipY + 10);
ctx.moveTo(arrowBaseX, arrowTipY);
ctx.lineTo(arrowBaseX + 5, arrowTipY + 10);
ctx.stroke();
ctx.font = 'italic 20px Times New Roman';
ctx.fillText('a', arrowBaseX + 20, arrowTipY + 10);

// 3. Internal structure (Platform and vertical support)
const platformY = 220;
ctx.fillStyle = 'white'; // Fill to make it look solid
ctx.fillRect(elevatorX, platformY, elevatorW, 10);
ctx.strokeRect(elevatorX, platformY, elevatorW, 10);

const supportX = elevatorX + elevatorW - 20;
ctx.fillRect(supportX, platformY - 100, 10, 100);
ctx.strokeRect(supportX, platformY - 100, 10, 100);

// 4. Coordinates setup for masses, pulley and rope
const m1_h = 50;
const m1_w = 80;
const m1_x = 100;
const m1_y = platformY - m1_h; // m1 sits on the platform

const pulley_r = 20;
// Align rope with the top of m1 for a clean horizontal line
const rope_y_horizontal = m1_y;
const pulley_cy = rope_y_horizontal + pulley_r;
const pulley_cx = supportX - pulley_r - 15;

// 5. Draw Pulley
ctx.beginPath();
ctx.arc(pulley_cx, pulley_cy, pulley_r, 0, 2 * Math.PI);
ctx.stroke();
// Axle
ctx.beginPath();
ctx.arc(pulley_cx, pulley_cy, 3, 0, 2 * Math.PI);
ctx.fillStyle = 'black';
ctx.fill();

// 6. Draw Block m1
ctx.fillStyle = '#E0E0E0'; // Light gray
ctx.fillRect(m1_x, m1_y, m1_w, m1_h);
ctx.strokeRect(m1_x, m1_y, m1_w, m1_h);

// 7. Draw Rope
ctx.beginPath();
ctx.moveTo(m1_x + m1_w, rope_y_horizontal);
ctx.lineTo(pulley_cx, rope_y_horizontal);
ctx.arc(pulley_cx, pulley_cy, pulley_r, -Math.PI / 2, 0); // 90-degree arc from top to right
const rope_x_vertical = pulley_cx + pulley_r;
const rope_end_y = 260;
ctx.lineTo(rope_x_vertical, rope_end_y);
ctx.stroke();

// 8. Draw Block m2
const m2_w = 50;
const m2_h = 50;
const m2_y = rope_end_y;
const m2_x = rope_x_vertical - m2_w / 2;
ctx.fillStyle = '#E0E0E0'; // Light gray
ctx.fillRect(m2_x, m2_y, m2_w, m2_h);
ctx.strokeRect(m2_x, m2_y, m2_w, m2_h);

// 9. Labels
ctx.fillStyle = 'black';
// Label m1
ctx.font = 'italic 24px Times New Roman';
ctx.fillText('m', m1_x + 25, m1_y + 28);
ctx.font = 'italic 16px Times New Roman';
ctx.fillText('1', m1_x + 42, m1_y + 33);

// Label m2
ctx.font = 'italic 24px Times New Roman';
ctx.fillText('m', m2_x + 15, m2_y + 35);
ctx.font = 'italic 16px Times New Roman';
ctx.fillText('2', m2_x + 32, m2_y + 40);

// Caption
ctx.font = '20px SimHei'; // Font for Chinese characters
const caption = '习题 1-43 图';
const textWidth = ctx.measureText(caption).width;
ctx.fillText(caption, (canvas.width - textWidth) / 2, canvas.height - 20);

</script>

</body>
</html>